/**
 * @this
 *
 * @flow
 */

'use strict'
import React, {Component} from 'react'
import {StyleSheet, View, Text, FlatList, TouchableOpacity} from 'react-native'

import RXEmitter from 'react-native-rxemitter'

export default class Setting extends Component {
  static navigationOptions = () => {
    return {
      headerTitle: '设置',
    }
  }
  constructor(props) {
    super(props)
    console.log('props=', props)
    this.state = {}
  }

  getSettingArray = () => {
    return [
      {
        title: '切换域名地址',
        nav: 'SwithDns',
        goto: true,
        func: null,
      },
      // ,{
      //   title: '强制退出',
      //   goto: true,
      //   func: this.forcedReturn,
      // },
    ]
  }

  _renderItem = data => {
    const {item, index} = data

    const title = item.title
    const nav = item.nav
    const goto = item.goto
    const func = item.func
    return (
      <TouchableOpacity
        style={styles.listBtn}
        onPress={() => {
          if (goto) {
            this.props.navigation.navigate(nav)
          } else {
            func && func()
          }
        }}>
        <Text style={styles.text}>{title}</Text>
      </TouchableOpacity>
    )
  }

  render() {
    const array = this.getSettingArray()
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            RXEmitter.emit('gotoHome')
          }}>
          <Text style={styles.text}>关闭 stick</Text>
        </TouchableOpacity>
        <FlatList
          style={{flex: 1}}
          data={array}
          keyExtractor={(item, index) => index}
          numColumns={1}
          horizontal={false}
          // ListEmptyComponent={this._renderEmpty}
          renderItem={this._renderItem}
          // ItemSeparatorComponent={this._renderSeparator}
          onEndReachedThreshold={0.5}
          showsVerticalScrollIndicator={false}
        />
      </View>
    )
  }

  forcedReturn = () => {
    this.render()
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  button: {
    padding: 20,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    lineHeight: 30,
    fontSize: 12,
    color: 'white',
  },
  listBtn: {
    marginHorizontal: 30,
    borderRadius: 3,
    marginVertical: 10,
    backgroundColor: '#008B8B',
    justifyContent: 'center',
    alignItems: 'center',
  },
})
